<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .outerBox {
            width: 200px;
            height: 200px;
            border: 1px solid rgb(218, 218, 218);
            margin: 100px;
        }

        .outerBox .nav {
            width: 100%;
            height: 40px;
            line-height: 40px;
        }

        .outerBox .nav a {
            text-decoration: none;
            margin: 0 10px;
            color: black;
            display: inline-block;
        }

        .outerBox .main {
            width: 100%;
            height: 160px;
        }

        .outerBox .main ul {
            margin: 5px;
        }

        .outerBox .main ul li {
            list-style: none;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 5px;
        }

        .outerBox .main ul li:hover {
            color: orangered;
            text-decoration-line: underline;
        }
    </style>
</head>

<body>
    <div class="outerBox">
        <div class="nav">
            <a href="#video">视频</a>
            <a href="#live">直播</a>
        </div>
        <div class="main">
            <ul>
            </ul>
        </div>
    </div>
</body>

</html>

<script>

    class Hot {
        constructor(hots) {
            this.hots = hots;
            this.ulEve = document.querySelector('.outerBox .main ul');
            this.lis = ``;
            this.as = [...document.querySelectorAll('a')];

            this.bindEvent();
        }

        render(type) {
            this.lis = this.hots[type].map((item) => { return `<li>${item}</li>` }).join('');
            this.ulEve.innerHTML = this.lis;
        }

        bindEvent() {
            window.onhashchange = () => {
                switch (location.hash) {
                    case '#video': this.render(0); break;
                    case '#live': this.render(1); break;
                }
            }

            this.as.forEach((item) => {
                item.onclick = () => {
                    this.as.forEach((item) => {item.style.color = '';item.style.borderTop = ''})
                    item.style.color = '#32CD32';
                    item.style.borderTop = '2px solid #32CD32';
                }
            })
        }
    }

    let hots = [
        [
            '恋情蹋光?李小璐带小鲜肉路旁摆..',
            '陈萌哂孕肚破离婚传闻，炫耀小件买..',
            '赵本山徒弟的片酬，小沈阳片酬一年...',
            '考公比自己大的女明军,刘诗诗干绝...',
            '“十亿富婆” 李冰冰，3000万米.',
            '被老外退货的8位女库,宁静遭家...',
        ],
        [
            '直播|双11全球快递“云监工”, ....',
            '慢直播|邂逅绝美云海日出',
            '慢直播|天舟五号已到位，将于近日...',
            '慢直播|济南路院息一 太下第泉',
            '直播|立冬拥抱暖阳',
            '慢直播:邂近绝美云海日出',
        ]
    ]

    new Hot(hots);

</script>